<template>
	<view class="page">


		<view class="scrapingBox">
			<view class="scrapingBoxContent">
				<!-- 奖品名称 -->
				<view>{{ prizeTitle || "" }}</view>
				<canvas :style="{'width':width+'px','height':height+'px'}" style="position: absolute; top: 0;"
					canvas-id="myCanvas" id="myCanvas" @touchstart="touchstart" @touchend="touchend"
					@touchmove="touchmove"></canvas>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				mask: true,
				wtf: true,
				luckDrawInfo: {},
				rule_show: false,
				result_show: false,
				prize_show: false,
				total: 0,
				currentPrize: {},
				list: [],
				id: "",
				prizeTitle: "1234",
				filePath: "",
				ctx: null,
				width: 300,
				height: 300,
				disabled: false, // 是否禁止刮卡
				readyState: false, // 是否开始绘制
				endState: false, // 结束刮卡状态
				watermark: '刮一刮', // 水印文字
				watermarkColor: '#c5c5c5', // 水印文字颜色
				watermarkSize: 14, // 水印文字大小
				title: '刮一刮开奖', // 提示文字
				titleColor: '#888', // 提示文字颜色
				titleSize: 24, // 提示文字大小
				startX: 0, // 触摸x轴位置
				startY: 0, // 触摸y轴位置
				touchSize: 30, // 触摸画笔大小
				percentage: 50, // 刮开百分之多少的时候开奖

				merchantInfo: {}
			}
		},
		props: {

		},
		//渲染完了
		onLoad() {
			this.init();
		},
		methods: {
			drawInit(imgUrl) {
				this.endState = false;
				this.readyState = false;
				this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
				// this.ctx.setFillStyle('#ddd'); // 填充颜色
				// this.ctx.fillRect(0, 0, this.width, this.height); // 填充区域（x,y,宽,高）
				/**
				 * 绘制文字水印
				 */
				// var width = this.watermark.length * this.watermarkSize;
				// this.ctx.save(); // 保存当前的绘图上下文。
				// this.ctx.rotate(-10 * Math.PI / 180); // 以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。
				// let x = 0;
				// let y = 0;
				// let i = 0;
				// while ((x <= this.width * 5 || y <= this.height * 5) && i < 300) {
				// 	this.ctx.setFillStyle(this.watermarkColor); // 填充颜色
				// 	this.ctx.setFontSize(this.watermarkSize); // 设置字体的字号
				// 	this.ctx.fillText(this.watermark, x, y); // 填充的文本（文字，x，y）
				// 	x += width + width * 1.6;
				// 	if (x > this.width && y <= this.height) {
				// 		x = -Math.random() * 100;
				// 		y += this.watermarkSize * 3;
				// 	}
				// 	i++;
				// }
				// this.ctx.restore(); // 恢复之前保存的绘图上下文。
				/**
				 * 绘制标题
				 */
				// this.ctx.setTextAlign("center"); // 用于设置文字的对齐
				// this.ctx.setTextBaseline("middle"); // 用于设置文字的水平对齐
				// this.ctx.setFillStyle(this.titleColor); // 填充颜色
				// this.ctx.setFontSize(this.titleSize); // 设置字体的字号
				// this.ctx.fillText(this.title, this.width / 2, this.height / 2); // 填充的文本（文字，x，y）

				/**
				 * 绘制图片
				 */
				this.ctx.drawImage(this.filePath, 0, 0, this.width, this.height);

				this.ctx.draw(); // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
				this.readyState = true; // 完成绘制
			},
			// 手指触摸动作开始
			touchstart(e) {
				if (this.disabled || this.endState) {
					return;
				}
				this.startPlay();
				this.startX = e.touches[0].x;
				this.startY = e.touches[0].y;
			},
			// 手指触摸后移动
			touchmove(e) {
				if (this.disabled || this.endState) return;
				if (!this.prizeTitle) return;
				this.ctx.clearRect(this.startX, this.startY, this.touchSize, this.touchSize); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
				this.ctx.draw(true); // false:本次绘制是否接着上一次绘制，true:保留当前画布上的内容
				//记录移动点位
				this.startX = e.touches[0].x;
				this.startY = e.touches[0].y;
			},
			// 手指触摸动作结束
			touchend(e) {
				if (this.disabled || this.endState) {
					return;
				}
				// 返回一个数组，用来描述 canvas 区域隐含的像素数据，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 <canvas> 组件。
				uni.canvasGetImageData({
					canvasId: 'myCanvas',
					x: 0,
					y: 0,
					width: this.width,
					height: this.height,
					success: (res) => {
						console.log(res);
						let pixels = res.data;
						let transPixels = [];
						for (let i = 0; i < pixels.length; i += 4) {
							if (pixels[i + 3] < 128) {
								transPixels.push(pixels[i + 3]);
							}
						}
						var percent = (transPixels.length / (pixels.length / 4) * 100).toFixed(2);
						console.log(percent, '===percent')
						if (percent >= this.percentage) {
							this.scrapingSuccess();
						}
					},
					fail: (e) => {
						console.log(e);
					},
				}, this);
			},
			// 成功，清除所有图层
			scrapingSuccess(e) {
				if (this.endState) {
					return;
				}
				this.endState = true;
				// 弹出奖品
				setTimeout(() => {
					this.result_show = true;

					uni.showModal({
						title: '中奖le',
						success: () => {
							this.drawInit();
						}
					})
					// this.wtf = true;
					// this.prizeTitle = "";
				}, 800)
			},
			init() {
				this.getInfo()
			},
			getInfo() {

				this.luckDrawInfo = {}
				this.total = 10
				let content = uni.createSelectorQuery().in(this).select(".scrapingBoxContent");
				content.boundingClientRect((data) => {
					this.ctx = uni.createCanvasContext('myCanvas', this);
					uni.getImageInfo({
						src: 'https://imgurl.haiminglan.cn/8d9aee1b4843f05d5006b79a37c1aad831e6133669167dcd380bb974011b2455.jpeg',
						success: (res) => {
							this.filePath = res.path;
							this.drawInit();
						}
					})
				}).exec()
			},

			// 点击开始,请求接口抽奖
			startPlay(index) {

				// if (!this.wtf) {
				// 	return false
				// }

				// 活动未开始或活动已结束
				// let startTimeMs = new Date(this.luckDrawInfo.start_time).getTime();
				// let endTimeMs = new Date(this.luckDrawInfo.end_time).getTime();
				// let nowTimeMs = new Date().getTime();
				// if (nowTimeMs < startTimeMs) {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: "活动未开始"
				// 	})
				// 	return false;
				// }
				// if (nowTimeMs > endTimeMs) {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: "活动已结束"
				// 	})
				// 	return false;
				// }

				// this.mask = false;
				// this.wtf = false;
				// luckDrawInfo.run({
				// 	id: this.id
				// }).then(res => {
				// 	this.currentPrize = res.data;
				// 	this.total = res.data.row_lottery_new.my_can_num;
				// 	this.prizeTitle = res.data.title;
				// }).catch(err => {
				// 	this.wtf = true;
				// });
			}
		}
	}
</script>

<style scoped lang="scss">
	.scrapingBoxContent {
		width: 536rpx;
		height: 318rpx;
		z-index: 2;
		position: relative;

		view {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 52rpx 116rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 72rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1B9AF9;
			text-shadow: 0px 4px 8px rgba(149, 216, 255, 0.5);
		}
	}
</style>